<nz-layout class="app-layout">
  <!-- <nz-header>
        <div class="logo"></div>
        <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
          <li nz-menu-item>nav 1</li>
          <li nz-menu-item nzSelected>nav 2</li>
          <li nz-menu-item>nav 3</li>
        </ul>
      </nz-header> -->
  <nz-sider nzCollapibfle [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo"></div>
    <ul nz-menu nzTheme="dark" nzMode="inline">

      <!-- <div class="icons-list">
         <i  nz-icon nzType="ng-zorro:antd"></i>
      </div> -->

      <li nz-submenu nzTitle="User" nzIcon="user">
        <ul>
<!--          <li nz-menu-item>首页-->
<!--            <a routerLink="/home"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->
<!--          <li nz-menu-item>用户-->
<!--            <a routerLink="/user"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->
<!--          <li nz-menu-item>Bootstrap-->
<!--            <a routerLink="/bootstrap"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->
<!--          <li nz-menu-item>注册表单-->
<!--            <a routerLink="/form"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->
<!--          <li nz-menu-item>Tree-->
<!--            <a routerLink="/other"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->

        </ul>
      </li>
      <li nz-submenu nzTitle="数据可视化" nzIcon="code">
        <ul>
<!--          <li nz-menu-item>数据可视化-->
<!--            <a routerLink="/other"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->
        </ul>
      </li>
      <!-- 表单填充 -->
      <li nz-submenu nzTitle="表单" nzIcon="table">
        <ul>
<!--          <li nz-menu-item>注册表单-->
<!--            <a routerLink="/form"></a>-->
<!--            <router-outlet></router-outlet>-->
<!--          </li>-->
          <!-- <li nz-menu-item>表单展示
            <a routerLink="/table"></a>
            <router-outlet></router-outlet>
          </li> -->
          <li nz-menu-item>表单列表联动
            <a routerLink="/tableToForm"></a>
            <router-outlet></router-outlet>
          </li>
        </ul>
      </li>

    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
         (click)="isCollapsed = !isCollapsed"></i>
    </nz-header>
    <nz-content>
      <nz-breadcrumb>
        <nz-breadcrumb-item>User</nz-breadcrumb-item>
        <nz-breadcrumb-item>bold</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer class="list-inline">Ant Design ©2020 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>
